<template>
  <div class="wrapper">

    <div class="box">
        <p>1.定位</p>
        <div class="div1">
          div1
        </div>

        <div class="div2-parent">
          第二个div的父div
          <div class="div2">
            div2
          </div>
  
        </div>
       

        <div class="div3">
          div3
        </div>
    </div>

    <div class="box box2">
      <p>2.定位</p>
      <span class="span1">span1</span>
      <span class="span2">span2</span>
      <span class="span3">span3</span>
    </div>
  </div>


</template>

<script>
  export default {
    data() {
      return {
       
      }
    },
    created() {
      
    },
    mounted() {
      
    },
    watch: {
     
    },
    methods: {
      
    }
  }
</script>

<style scoped>

  .wrapper{
    margin:10px;
  }



  .box{
    border: 1px solid rgb(207, 177, 177);
    margin-top: 10px;
  }
  .box2{
    margin-top: 50px;
  }

   .div1{
    background-color: aqua;
    height: 50px;
   }

   .div2-parent{
    position:absolute;
    height:100px;
    background-color: rgb(47, 130, 255);
   }


   .div2{
    background-color: rgb(102, 185, 47);
    height: 50px;
    width: 200px;
    position: relative;
    left: 50px;
    top: 20px;
   }
   .div3{
    background-color: rgb(207, 19, 107);
    height: 50px;
   }

   .span1{
     background-color: rgb(189, 21, 21);
     display: inline-block; 
     width: 100px;
     height: 100px;
   }
   .span2{
    width: 100px;
     height: 100px;
     background-color: rgb(22, 112, 128);
     display: inline-block;  
   }
   .span3{
    width: 100px;
     height: 100px;
    display: inline-block; 
     background-color: rgb(44, 32, 156);
   }
  
</style>